<template>
  <el-card shadow="hover" class="layout-padding-auto">
    <!-- <div class="userInfo">
      <div class="user">
        <div class="back" @click="backGZT">←返回上一级</div>
        <div class="topTitle">个人信息</div>
        <el-form :model="userForm" ref="eqFormRef">
          <el-form-item>
            <div class="headSculpture">
              <el-upload
                class="avatar-uploader"
                :action="`${proxy.$http}/user/upload/uploadFile`"
                :auto-upload="true"
                :http-request="(resp: any) => { return handleUpload(resp, 1) }"
                limit="1"
                :headers="headers"
                accept=".png,.jpg,jpeg"
                :show-file-list="false"
                :before-upload="(resp: any) => { return fileBeforeUpload(resp, 1) }"
                :on-error="(resp: any) => { return fileError(resp, 1) }"
                :disabled="true"
              >
                <img
                  v-if="userForm.portrait"
                  :src="userForm.portrait"
                  class="avatar"
                />
                <div v-else class="picture">{{ realName }}</div>
              </el-upload>
              <div class="headBtn">
                <el-button class="btn" type="primary" plain @click="uploadHead"
                  >上传头像</el-button
                >
                <div class="tips" style="margin: auto auto 0px 5px">
                  只能上传jpg/png文件，且不超过1MB
                </div>
              </div>
            </div>
          </el-form-item>
          <el-form-item label="姓名" :label-width="formLabelWidth">
            <div class="test">{{ userForm.realName }}</div>
          </el-form-item>
          <el-form-item label="性别" :label-width="formLabelWidth">
            <div class="test">
              {{ userForm.sex == 1 ? '男' : userForm.sex == 2 ? '女' : '' }}
            </div>
          </el-form-item>
          <el-form-item label="账号" :label-width="formLabelWidth">
            <div class="test">{{ userForm.userAccount }}</div>
          </el-form-item>
          <el-form-item label="手机号" :label-width="formLabelWidth">
            <div class="test">{{ userForm.userTel }}</div>
          </el-form-item>
          <el-form-item label="角色类型" :label-width="formLabelWidth">
            <div class="test">{{ userForm.roleName }}</div>
          </el-form-item>
          <el-form-item label="职位" :label-width="formLabelWidth">
            <div class="test">{{ userForm.positionName }}</div>
          </el-form-item>
          <el-form-item label="部门机构" :label-width="formLabelWidth">
            <div class="test">{{ userForm.deptName }}</div>
          </el-form-item>
          <el-form-item label="入职时间" :label-width="formLabelWidth">
            <div class="test">{{ userForm.entryDate }}</div>
          </el-form-item>
        </el-form>
        <div style="margin-top: 10px; text-align: center">
          <el-button
            style="width: 100%"
            type="primary"
            plain
            @click="updateUserInfo"
            >修改</el-button
          >
        </div>
      </div>
      <div class="bangding">
        <div class="topTitle">账号信息</div>
        <div class="phoneAccount">
          <div class="boxTop">账号信息</div>
          <div class="accountcontent">
            <div>{{ userAccount }}</div>
            <el-button
              v-if="userForm.bindType != 2 && userForm.bindType != 3"
              class="btn"
              type="primary"
              plain
              @click="updateAccount"
              >更换账号</el-button
            >
          </div>
        </div>
        <div class="bindAccount" v-for="v in userForm.userBindList">
          <div class="boxTop">
            {{
              v.bindType == 1
                ? '微信小程序'
                : v.bindType == 2
                ? '企业微信'
                : v.bindType == 3
                ? '钉钉'
                : v.bindType == 4
                ? '飞书'
                : ''
            }}
          </div>
          <div class="bindcontent">
            <div class="left">
              <img
                v-if="v.bindType == 1"
                src="../../assets/weixin.png"
                alt=""
              />
              <img
                v-if="v.bindType == 2"
                src="../../assets/qiyeweixin.png"
                alt=""
              />
              <img
                v-if="v.bindType == 3"
                src="../../assets/dingding.png"
                alt=""
              />

              <div style="margin: auto 0">
                {{ v.thirdId == '' ? '未绑定' : '已绑定' }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div> -->
    <div class="account-box">
      <div class="info-box">
        <div class="title">
          <span>个人信息</span>
          <el-button type="primary" @click="updateUserInfo">修改</el-button>
        </div>
        <div class="flex">
          <div class="flex-100">
            <Row
              :width="'1'"
              :borderTop="true"
              :label="'姓名'"
              :content="userForm.realName"
            >
            </Row>
            <Row
              :width="'1'"
              :borderTop="false"
              :label="'账号'"
              :content="userForm.userAccount"
              v-if="userForm.bindType != 2"
            >
            </Row>
            <Row
              :width="'1'"
              :borderTop="false"
              :label="'手机号'"
              :content="userForm.userTel"
              v-else
            >
            </Row>
          </div>
          <div class="flex-100">
            <Row
              :width="'1'"
              :borderTop="true"
              :borderLeft="true"
              :label="'性别'"
              :content="
                userForm.sex == 1 ? '男' : userForm.sex == 2 ? '女' : ''
              "
            >
            </Row>
            <Row
              :width="'1'"
              :borderTop="false"
              :borderLeft="true"
              :label="'角色类型'"
              :content="userForm.roleName"
            >
            </Row>
          </div>
          <Row
            :width="'1'"
            :borderTop="true"
            :label="'头像'"
            :borderLeft="true"
            :type="'slot'"
            :center="true"
          >
            <template #slot>
              <el-image
                v-if="userForm.portrait"
                style="width: 72px; height: 72px; border-radius: 72px"
                :src="userForm.portrait"
                :preview-src-list="[userForm.portrait]"
              />
              <div v-else class="picture">{{ realName }}</div>
            </template>
          </Row>
        </div>
        <div class="flex">
          <div class="flex-33">
            <Row
              :width="'1'"
              :borderTop="false"
              :label="'职位'"
              :content="userForm.positionName"
            >
            </Row>
          </div>
          <div class="flex-66">
            <Row
              :width="'1'"
              :borderTop="false"
              :borderLeft="true"
              :label="'部门机构'"
              :content="userForm.deptName"
            >
            </Row>
          </div>
        </div>
        <div v-if="userForm.bindType != 2">
          <div class="title">
            <span>账户信息</span>
            <el-button
              type="primary"
              @click="updateAccount"
              v-if="userForm.bindType != 2"
              >更换账号</el-button
            >
          </div>
          <Row
            :width="'1'"
            :borderTop="true"
            :label="'账号'"
            :content="userForm.userAccount"
          >
          </Row>
        </div>
      </div>
    </div>

    <UpdateAccount
      :accountDialog="accountDialog"
      :userAccount="userForm.userAccount"
      :userId="userForm.id"
      @quxiao="quxiao"
      @submitAccount="submitAccount"
    >
    </UpdateAccount>
    <UpdateUserInfo
      :userDialog="userDialog"
      :userFormUpadate="userFormUpadate"
      @quxiaoUser="quxiaoUser"
      @qrUser="qrUser"
    ></UpdateUserInfo>
  </el-card>
</template>
<script setup lang="ts">
import Row from '/@/components/Row/index.vue'

import { ElLoading, ElMessage, FormRules } from 'element-plus'
import { ref, reactive, getCurrentInstance, defineAsyncComponent } from 'vue'
import { uploadFileApi } from '/@/api/publicApi'
import { getLoginUserInfoApi, updatePortraitOrSexApi } from '/@/api/user'
import router from '/@/router'
import { Session } from '/@/utils/storage'
import { useUserInfo } from '/@/stores/userInfo'

const stores = useUserInfo()
const { proxy } = getCurrentInstance() as any
const UpdateAccount = defineAsyncComponent(
  () => import('./components/UpdateAccount.vue')
)
const UpdateUserInfo = defineAsyncComponent(
  () => import('./components/UpdateUserInfo.vue')
)
const userForm = ref<any>({})
const formLabelWidth = ref('80px')
const realName = ref('')
const userAccount = ref('')
const getUserInfo = () => {
  getLoginUserInfoApi().then((res) => {
    if (res.code == 0) {
      Session.remove('shebei')
      Session.set('shebei', res.data)
      userForm.value = res.data
      realName.value = userForm.value.realName.slice(0, 1)
      var reg = /^(\d{3})\d{4}(\d{4})$/
      userAccount.value = userForm.value.userAccount.replace(reg, '$1****$2')
      stores.setUserInfos()
      // if (userForm.value.userBindList.length == 0) {
      // userForm.value.userBindList = [
      //   {
      //     bindType: 1, //绑定类型；1.微信小程序  2.企业微信   3.钉钉   4.飞书
      //     thirdId: ''
      //   },
      //   {
      //     bindType: 2, //绑定类型；1.微信小程序  2.企业微信   3.钉钉   4.飞书
      //     thirdId: ''
      //   },
      //   {
      //     bindType: 3, //绑定类型；1.微信小程序  2.企业微信   3.钉钉   4.飞书
      //     thirdId: ''
      //   }
      // ]
      // }
    }
  })
}
getUserInfo()
//头像上传
const userInfo = Session.get('token')
const token = userInfo ? userInfo : ''
const headers = ref({
  'Content-Type': 'multipart/form-data',
  'Api-User-Token': token
})
const handleUpload = (file: any, type: any) => {
  const loading = ElLoading.service({
    lock: true,
    text: '上传中',
    background: 'rgba(0, 0, 0, 0.7)'
  })
  uploadFileApi({ type: 1, file: file.file }).then((res) => {
    if (res.code == 0) {
      userForm.value.portrait = res.data.fileIds[0]
      updatePortraitOrSexApi({ portrait: res.data.fileIds[0] }).then((r) => {
        if (r.code == 0) {
          ElMessage.success('头像修改成功！')
          getUserInfo()
          loading.close()
        } else {
          loading.close()
        }
      })
    } else {
      loading.close()
    }
  })
}

const fileError = (err: any, type: any) => {
  ElMessage.error('项目文件上传失败！')
  userForm.value.portrait = ''
}
const fileBeforeUpload = (rawFile: any, type: any) => {
  // console.log('rawFile', rawFile)
  if (rawFile.type !== 'image/jpeg') {
    ElMessage.error('请上传jpg/png文件')
    return false
  } else if (rawFile.size / 1024 / 1024 > 1) {
    ElMessage.error('上传文件不能超过1MB!')
    return false
  }
  return true
}

const uploadHead = () => {
  const fileType = ['jpg', 'png']
  const inputFile = document.createElement('input') as any
  inputFile.type = 'file'
  inputFile.style.display = 'none'
  document.body.appendChild(inputFile)
  inputFile.click()
  inputFile.addEventListener('change', () => {
    const file = inputFile.files[0]
    var testmsg = file.name.substring(file.name.lastIndexOf('.') + 1)

    if (!fileType.includes(testmsg)) {
      ElMessage.warning('上传的文件格式只能是,jpg,png')
      document.body.removeChild(inputFile)
      return false
    }
    //上传接口
    handleUpload({ file: file }, 1)
  })
}

const sexChange = (val: any) => {
  updatePortraitOrSexApi({ sex: val }).then((res) => {
    if (res.code == 0) {
      ElMessage.success('修改成功！')
      getUserInfo()
    }
  })
}

//修改账号信息
const userDialog = ref(false)
const userFormUpadate = ref<any>({})
const updateUserInfo = () => {
  userFormUpadate.value = userForm.value
  userDialog.value = true
}

const quxiaoUser = () => {
  userDialog.value = false
}

const qrUser = () => {
  getUserInfo()
  userDialog.value = false
}

const accountDialog = ref(false)
const updateAccount = () => {
  accountDialog.value = !accountDialog.value
}
const quxiao = () => {
  accountDialog.value = !accountDialog.value
}
const submitAccount = () => {
  getUserInfo()
  accountDialog.value = !accountDialog.value
}

const backGZT = () => {
  router.go(-1)
}
</script>
<style scoped lang="scss">
.userInfo {
  display: flex;

  .user {
    width: 20%;
    padding-right: 20px;
    border-right: 1px solid rgba(217, 217, 217, 1);

    .back {
      font-weight: 400;
      line-height: 22px;
      color: rgba(140, 140, 140, 1);
      cursor: pointer;
    }

    .headSculpture {
      display: flex;

      .headBtn {
        margin-left: 24px;

        .btn {
          margin-bottom: 24px;
        }

        .tips {
          font-size: 12px;
          font-weight: 400;
          line-height: 20px;
          color: rgba(140, 140, 140, 1);
          text-align: left;
        }
      }
    }
  }

  .divider {
    height: 100%;
  }

  .bangding {
    width: 80%;
    padding: 22px 0 0 20px;

    .phoneAccount {
      width: 800px;
      padding: 16px 24px;
      border-radius: 4px;
      background: rgba(245, 245, 245, 1);
      margin-bottom: 12px;

      .accountcontent {
        display: flex;
        justify-content: space-between;

        > div {
          margin: auto 0;
        }
      }
    }

    .bindAccount {
      width: 800px;
      padding: 16px 24px;
      border-radius: 4px;
      background: rgba(245, 245, 245, 1);
      margin-bottom: 12px;

      .bindcontent {
        display: flex;
        justify-content: space-between;

        .left {
          display: flex;

          > img {
            width: 40px;
            height: 40px;
            border-radius: 40px;
            margin-right: 9px;
          }
        }
      }
    }
  }
}

.topTitle {
  font-size: var(--el-font-size-base);
  font-weight: 700;
  margin: 24px 0;
}

.boxTop {
  font-weight: 500;
  letter-spacing: 0px;
  line-height: 22px;
  color: rgba(77, 77, 77, 1);
  margin-bottom: 12px;
}

.avatar-uploader .avatar {
  width: 72px;
  height: 72px;
  display: block;
}

.picture {
  font-size: 36px;
  line-height: 72px;
  color: #ffffff;
  width: 72px;
  height: 72px;
  text-align: center;
  background: var(--el-color-primary);
}

.test {
  font-size: var(--el-font-size-base);
  word-break: break-all;
}

.account-box {
  height: 100%;
  padding: 20px;
  background-color: #ffffff;

  .info-box {
    .title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 30px;
      margin-bottom: 16px;
      height: 14px;
      line-height: 14px;
      font-size: 14px;
      border-left: 2px solid rgba(15, 83, 172, 1);

      span {
        margin-left: 8px;
        font-size: 16px;
        color: rgba(68, 68, 68, 1);
      }
    }

    .flex {
      display: flex;

      .flex-100 {
        width: 100%;
      }

      .flex-33 {
        width: 33.33333%;
        min-width: 277px;
      }

      .flex-66 {
        width: 66.66666%;
      }
    }
  }
}
</style>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}
</style>
